<template>
	<div class="addEdit-block">
		<el-form class="detail-form-content" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px"
			:style="{backgroundColor:addEditForm.addEditBoxColor}">
			<el-row>
				<el-col :span="12">
					<el-form-item class="input" v-if="type!='info'" label="学号" prop="xuehao">
						<el-input v-model="ruleForm.xuehao" placeholder="学号" clearable :readonly="ro.xuehao"></el-input>
					</el-form-item>
					<div v-else>
						<el-form-item class="input" label="学号" prop="xuehao">
							<el-input v-model="ruleForm.xuehao" placeholder="学号" readonly></el-input>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="12">
					<el-form-item class="input" v-if="type!='info'" label="姓名" prop="xingming">
						<el-input v-model="ruleForm.xingming" placeholder="姓名" clearable :readonly="ro.xingming">
						</el-input>
					</el-form-item>
					<div v-else>
						<el-form-item class="input" label="姓名" prop="xingming">
							<el-input v-model="ruleForm.xingming" placeholder="姓名" readonly></el-input>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="12">
					<el-form-item class="input" v-if="type!='info'" label="班级" prop="banji">
						<el-input v-model="ruleForm.banji" placeholder="班级" clearable :readonly="ro.banji"></el-input>
					</el-form-item>
					<div v-else>
						<el-form-item class="input" label="班级" prop="banji">
							<el-input v-model="ruleForm.banji" placeholder="班级" readonly></el-input>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="12">
					<el-form-item class="select" v-if="type!='info'" label="就业方式" prop="jiuyefangshi">
						<el-select :disabled="ro.jiuyefangshi" v-model="ruleForm.jiuyefangshi" placeholder="请选择就业方式">
							<el-option v-for="(item,index) in jiuyefangshiOptions" v-bind:key="index" :label="item"
								:value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<div v-else>
						<el-form-item class="input" label="就业方式" prop="jiuyefangshi">
							<el-input v-model="ruleForm.jiuyefangshi" placeholder="就业方式" readonly></el-input>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="12">
					<el-form-item class="select" v-if="type!='info'" label="是否就业" prop="shifoujiuye">
						<el-select @change="cityChange" :disabled="ro.shifoujiuye" v-model="ruleForm.shifoujiuye"
							placeholder="请选择是否就业">
							<el-option v-for="(item,index) in shifoujiuyeOptions" v-bind:key="index" :label="item"
								:value="item">
							</el-option>
						</el-select>
					</el-form-item>
					<div v-else>
						<el-form-item class="input" label="是否就业" prop="shifoujiuye">
							<el-input v-model="ruleForm.shifoujiuye" placeholder="是否就业" readonly></el-input>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="12">
					<el-form-item class="input" v-if="type!='info'" label="推荐公司" prop="tuijiangongsi">
						<el-input v-model="ruleForm.tuijiangongsi" placeholder="推荐公司" clearable
							:readonly="ro.tuijiangongsi" :disabled="jingyong"></el-input>
					</el-form-item>
					<div v-else>
						<el-form-item class="input" label="推荐公司" prop="tuijiangongsi">
							<el-input v-model="ruleForm.tuijiangongsi" placeholder="推荐公司" readonly  ></el-input>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="12">
					<el-form-item class="input" v-if="type!='info'" label="推荐次数" prop="tuijiancishu">
						<el-input v-model="ruleForm.tuijiancishu" placeholder="推荐次数" clearable
							:readonly="ro.tuijiancishu" :disabled="jingyong"></el-input>
					</el-form-item>
					<div v-else>
						<el-form-item class="input" label="推荐次数" prop="tuijiancishu">
							<el-input v-model="ruleForm.tuijiancishu" placeholder="推荐次数" readonly  ></el-input>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="12">
					<el-form-item class="input" v-if="type!='info'" label="公司名称" prop="gongsixinxi">
						<el-input v-model="ruleForm.gongsixinxi" placeholder="公司名称" clearable
							:readonly="ro.gongsixinxi"  :disabled="jingyong"></el-input>
					</el-form-item>
					<div v-else>
						<el-form-item class="input" label="公司名称" prop="gongsixinxi">
							<el-input v-model="ruleForm.gongsixinxi" placeholder="公司名称" readonly></el-input>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="12">
					<el-form-item class="input" label="公司类型" prop="gongsileixing">

						<!-- <el-input v-model="ruleForm.gongsileixing" placeholder="公司类型" clearable
							:readonly="ro.gongsileixing"></el-input> -->

						<el-select v-model="ruleForm.gongsileixing" placeholder="公司类型"  :disabled="jingyong">
							<el-option v-for="(item,index) in gongsileixingOptions" v-bind:key="index" :label="item"
								:value="item">
							</el-option>
						</el-select>


					</el-form-item>
					<!-- <div v-else>
						
						<el-form-item class="input" label="公司类型" prop="gongsileixing">
							<el-input v-model="ruleForm.gongsileixing" placeholder="公司类型" readonly></el-input>
						</el-form-item>
						
						
						
					</div> -->
				</el-col>
				<el-col :span="12">
					<el-form-item class="input" v-if="type!='info'" label="离职次数" prop="lizhicishu" >
						<el-input v-model="ruleForm.lizhicishu" placeholder="离职次数" clearable :readonly="ro.lizhicishu"  :disabled="jingyong">
						</el-input>
					</el-form-item>
					<div v-else>
						<el-form-item class="input" label="离职次数" prop="lizhicishu">
							<el-input v-model="ruleForm.lizhicishu" placeholder="离职次数" readonly ></el-input>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="12">
					<el-form-item class="input" v-if="type!='info'" label="离职理由" prop="lizhiliyou">
						<el-input v-model="ruleForm.lizhiliyou" placeholder="离职理由" clearable :readonly="ro.lizhiliyou"  :disabled="jingyong">
						</el-input>
					</el-form-item>
					<div v-else>
						<el-form-item class="input" label="离职理由" prop="lizhiliyou">
							<el-input v-model="ruleForm.lizhiliyou" placeholder="离职理由" readonly></el-input>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="12">
					<el-form-item class="input" v-if="type!='info'" label="就业情况" prop="jiuyeqingkuang">
						<el-input v-model="ruleForm.jiuyeqingkuang" placeholder="就业情况" clearable  :disabled="jingyong"
							:readonly="ro.jiuyeqingkuang"></el-input>
					</el-form-item>
					<div v-else>
						<el-form-item class="input" label="就业情况" prop="jiuyeqingkuang">
							<el-input v-model="ruleForm.jiuyeqingkuang" placeholder="就业情况" readonly></el-input>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="12">
					<el-form-item class="input" v-if="type!='info'" label="薪资说明" prop="xinzishuoming">
						<el-input v-model="ruleForm.xinzishuoming" placeholder="薪资说明" clearable
							:readonly="ro.xinzishuoming"  :disabled="jingyong"></el-input>
					</el-form-item>
					<div v-else>
						<el-form-item class="input" label="薪资说明" prop="xinzishuoming">
							<el-input v-model="ruleForm.xinzishuoming" placeholder="薪资说明" readonly></el-input>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="12">
					<el-form-item class="date" v-if="type!='info'" label="日期" prop="riqi">
						<el-date-picker format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="ruleForm.riqi"
							type="date" :readonly="ro.riqi" placeholder="日期"  :disabled="jingyong">
						</el-date-picker>
					</el-form-item>
					<div v-else>
						<el-form-item class="input" v-if="ruleForm.riqi" label="日期" prop="riqi">
							<el-input v-model="ruleForm.riqi" placeholder="日期" readonly></el-input>
						</el-form-item>
					</div>
				</el-col>
			</el-row>
			<el-form-item class="btn">
				<el-button v-if="type!='info'" type="primary" class="btn-success" @click="onSubmit">提交</el-button>
				<el-button v-if="type!='info'" class="btn-close" @click="back()">取消</el-button>
				<el-button v-if="type=='info'" class="btn-close" @click="back()">返回</el-button>
			</el-form-item>
		</el-form>


	</div>
</template>
<script>
	// 数字，邮件，手机，url，身份证校验
	import {
		isNumber,
		isIntNumer,
		isEmail,
		isPhone,
		isMobile,
		isURL,
		checkIdCard
	} from "@/utils/validate";
	export default {
		data() {
			let self = this
			var validateIdCard = (rule, value, callback) => {
				if (!value) {
					callback();
				} else if (!checkIdCard(value)) {
					callback(new Error("请输入正确的身份证号码"));
				} else {
					callback();
				}
			};
			var validateUrl = (rule, value, callback) => {
				if (!value) {
					callback();
				} else if (!isURL(value)) {
					callback(new Error("请输入正确的URL地址"));
				} else {
					callback();
				}
			};
			var validateMobile = (rule, value, callback) => {
				if (!value) {
					callback();
				} else if (!isMobile(value)) {
					callback(new Error("请输入正确的手机号码"));
				} else {
					callback();
				}
			};
			var validatePhone = (rule, value, callback) => {
				if (!value) {
					callback();
				} else if (!isPhone(value)) {
					callback(new Error("请输入正确的电话号码"));
				} else {
					callback();
				}
			};
			var validateEmail = (rule, value, callback) => {
				if (!value) {
					callback();
				} else if (!isEmail(value)) {
					callback(new Error("请输入正确的邮箱地址"));
				} else {
					callback();
				}
			};
			var validateNumber = (rule, value, callback) => {
				if (!value) {
					callback();
				} else if (!isNumber(value)) {
					callback(new Error("请输入数字"));
				} else {
					callback();
				}
			};
			var validateIntNumber = (rule, value, callback) => {
				if (!value) {
					callback();
				} else if (!isIntNumer(value)) {
					callback(new Error("请输入整数"));
				} else {
					callback();
				}
			};
			return {
				addEditForm: {
					"btnSaveFontColor": "rgba(45, 103, 81, 1)",
					"selectFontSize": "14px",
					"btnCancelBorderColor": "rgba(112, 112, 112, 1)",
					"inputBorderRadius": "0",
					"inputFontSize": "14px",
					"textareaBgColor": "#fff",
					"btnSaveFontSize": "18px",
					"textareaBorderRadius": "0",
					"uploadBgColor": "#fff",
					"textareaBorderStyle": "solid",
					"btnCancelWidth": "145px",
					"textareaHeight": "120px",
					"dateBgColor": "#fff",
					"btnSaveBorderRadius": "44px",
					"uploadLableFontSize": "14px",
					"textareaBorderWidth": "1px",
					"inputLableColor": "rgba(0, 0, 0, 1)",
					"addEditBoxColor": "rgba(255, 255, 255, 1)",
					"dateIconFontSize": "14px",
					"btnSaveBgColor": "rgba(237, 247, 255, 1)",
					"uploadIconFontColor": "#8c939d",
					"textareaBorderColor": "rgba(112, 112, 112, 1)",
					"btnCancelBgColor": "rgba(232, 232, 232, 1)",
					"selectLableColor": "rgba(0, 0, 0, 1)",
					"btnSaveBorderStyle": "dashed",
					"dateBorderWidth": "1px",
					"dateLableFontSize": "14px",
					"dateBorderRadius": "0",
					"btnCancelBorderStyle": "dashed",
					"selectLableFontSize": "14px",
					"selectBorderStyle": "solid",
					"selectIconFontColor": "#C0C4CC",
					"btnCancelHeight": "50px",
					"inputHeight": "40px",
					"btnCancelFontColor": "rgba(112, 112, 112, 1)",
					"dateBorderColor": "rgba(112, 112, 112, 1)",
					"dateIconFontColor": "#C0C4CC",
					"uploadBorderStyle": "solid",
					"dateBorderStyle": "solid",
					"dateLableColor": "rgba(0, 0, 0, 1)",
					"dateFontSize": "14px",
					"inputBorderWidth": "1px",
					"uploadIconFontSize": "28px",
					"selectHeight": "40px",
					"inputFontColor": "rgba(0, 0, 0, 1)",
					"uploadHeight": "148px",
					"textareaLableColor": "rgba(0, 0, 0, 1)",
					"textareaLableFontSize": "14px",
					"btnCancelFontSize": "18px",
					"inputBorderStyle": "solid",
					"btnCancelBorderRadius": "44px",
					"inputBgColor": "#fff",
					"inputLableFontSize": "14px",
					"uploadLableColor": "rgba(0, 0, 0, 1)",
					"uploadBorderRadius": "0",
					"btnSaveHeight": "50px",
					"selectBgColor": "#fff",
					"btnSaveWidth": "145px",
					"selectIconFontSize": "14px",
					"dateHeight": "40px",
					"selectBorderColor": "rgba(112, 112, 112, 1)",
					"inputBorderColor": "rgba(112, 112, 112, 1)",
					"uploadBorderColor": "rgba(112, 112, 112, 1)",
					"textareaFontColor": "rgba(0, 0, 0, 1)",
					"selectBorderWidth": "1px",
					"dateFontColor": "rgba(0, 0, 0, 1)",
					"btnCancelBorderWidth": "4px",
					"uploadBorderWidth": "1px",
					"textareaFontSize": "14px",
					"selectBorderRadius": "0",
					"selectFontColor": "rgba(0, 0, 0, 1)",
					"btnSaveBorderColor": "rgba(45, 103, 81, 1)",
					"btnSaveBorderWidth": "4px"
				},
				id: '',
				type: '',
				ro: {
					xuehao: false,
					xingming: false,
					banji: false,
					jiuyefangshi: false,
					shifoujiuye: false,
					tuijiangongsi: false,
					tuijiancishu: false,
					gongsixinxi: false,
					gongsileixing: false,
					lizhicishu: false,
					lizhiliyou: false,
					jiuyeqingkuang: false,
					xinzishuoming: false,
					riqi: false,
				},
				ruleForm: {
					xuehao: '',
					xingming: '',
					banji: '',
					jiuyefangshi: '',
					shifoujiuye: '',
					tuijiangongsi: '',
					tuijiancishu: '',
					gongsixinxi: '',
					gongsileixing: '',
					lizhicishu: '',
					lizhiliyou: '',
					jiuyeqingkuang: '',
					xinzishuoming: '',
					riqi: '',
				},
				jiuyefangshiOptions: [],
				shifoujiuyeOptions: [],
				rules: {
					xuehao: [],
					xingming: [],
					banji: [],
					jiuyefangshi: [],
					shifoujiuye: [],
					tuijiangongsi: [],
					tuijiancishu: [],
					gongsixinxi: [],
					gongsileixing: [],
					lizhicishu: [],
					lizhiliyou: [],
					jiuyeqingkuang: [],
					xinzishuoming: [],
					riqi: [],
				},
				jingyong: false
			};
		},
		props: ["parent"],
		computed: {



		},
		created() {
			this.ruleForm.riqi = this.getCurDate()
			this.addEditStyleChange()
			this.addEditUploadStyleChange()
		},
		methods: {
			cityChange() {
				if (this.ruleForm.shifoujiuye == "否") {
					this.jingyong = true;
					 
				} else {
					this.jingyong = false;
					 
				}},


				
				// 下载
				download(file) {
						window.open(`${file}`)
					},
					// 初始化
					init(id, type) {
						if (id) {
							this.id = id;
							this.type = type;
						}
						if (this.type == 'info' || this.type == 'else') {
							this.info(id);
						} else if (this.type == 'logistics') {
							this.logistics = false;
							this.info(id);
						} else if (this.type == 'cross') {
							var obj = this.$storage.getObj('crossObj');
							for (var o in obj) {
								if (o == 'xuehao') {
									this.ruleForm.xuehao = obj[o];
									this.ro.xuehao = true;
									continue;
								}
								if (o == 'xingming') {
									this.ruleForm.xingming = obj[o];
									this.ro.xingming = true;
									continue;
								}
								if (o == 'banji') {
									this.ruleForm.banji = obj[o];
									this.ro.banji = true;
									continue;
								}
								if (o == 'jiuyefangshi') {
									this.ruleForm.jiuyefangshi = obj[o];
									this.ro.jiuyefangshi = true;
									continue;
								}
								if (o == 'shifoujiuye') {
									this.ruleForm.shifoujiuye = obj[o];
									this.ro.shifoujiuye = true;
									continue;
								}
								if (o == 'tuijiangongsi') {
									this.ruleForm.tuijiangongsi = obj[o];
									this.ro.tuijiangongsi = true;
									continue;
								}
								if (o == 'tuijiancishu') {
									this.ruleForm.tuijiancishu = obj[o];
									this.ro.tuijiancishu = true;
									continue;
								}
								if (o == 'gongsixinxi') {
									this.ruleForm.gongsixinxi = obj[o];
									this.ro.gongsixinxi = true;
									continue;
								}
								if (o == 'gongsileixing') {
									this.ruleForm.gongsileixing = obj[o];
									this.ro.gongsileixing = true;
									continue;
								}
								if (o == 'lizhicishu') {
									this.ruleForm.lizhicishu = obj[o];
									this.ro.lizhicishu = true;
									continue;
								}
								if (o == 'lizhiliyou') {
									this.ruleForm.lizhiliyou = obj[o];
									this.ro.lizhiliyou = true;
									continue;
								}
								if (o == 'jiuyeqingkuang') {
									this.ruleForm.jiuyeqingkuang = obj[o];
									this.ro.jiuyeqingkuang = true;
									continue;
								}
								if (o == 'xinzishuoming') {
									this.ruleForm.xinzishuoming = obj[o];
									this.ro.xinzishuoming = true;
									continue;
								}
								if (o == 'riqi') {
									this.ruleForm.riqi = obj[o];
									this.ro.riqi = true;
									continue;
								}
							}
						}
						// 获取用户信息
						this.$http({
							url: `${this.$storage.get('sessionTable')}/session`,
							method: "get"
						}).then(({
							data
						}) => {
							if (data && data.code === 0) {
								var json = data.data;
								if (json.xuehao != '' && json.xuehao) {
									this.ruleForm.xuehao = json.xuehao
									this.ro.xuehao = true;
								}
								if (json.xingming != '' && json.xingming) {
									this.ruleForm.xingming = json.xingming
									this.ro.xingming = true;
								}
								if (json.banji != '' && json.banji) {
									this.ruleForm.banji = json.banji
									this.ro.banji = true;
								}
							} else {
								this.$message.error(data.msg);
							}
						});
						this.jiuyefangshiOptions = "自主就业,推荐就业".split(',')
						this.shifoujiuyeOptions = "否,是".split(',')
						this.gongsileixingOptions = "有限责任公司,股份有限公司,有限合伙企业,外商独资公司,个人独资企业,国有独资公司,其他".split(',')
					},
					// 多级联动参数
					info(id) {
						this.$http({
							url: `jiuyezhongxin/info/${id}`,
							method: "get"
						}).then(({
							data
						}) => {
							if (data && data.code === 0) {
								this.ruleForm = data.data;
								//解决前台上传图片后台不显示的问题
								let reg = new RegExp('../../../upload', 'g') //g代表全部
							} else {
								this.$message.error(data.msg);
							}
						});
					},


					// 提交
					onSubmit() {





























						var objcross = this.$storage.getObj('crossObj');

						//更新跨表属性
						var crossuserid;
						var crossrefid;
						var crossoptnum;
						if (this.type == 'cross') {
							var statusColumnName = this.$storage.get('statusColumnName');
							var statusColumnValue = this.$storage.get('statusColumnValue');
							if (statusColumnName != '') {
								var obj = this.$storage.getObj('crossObj');
								if (!statusColumnName.startsWith("[")) {
									for (var o in obj) {
										if (o == statusColumnName) {
											obj[o] = statusColumnValue;
										}
									}
									var table = this.$storage.get('crossTable');
									this.$http({
										url: `${table}/update`,
										method: "post",
										data: obj
									}).then(({
										data
									}) => {});
								} else {
									crossuserid = this.$storage.get('userid');
									crossrefid = obj['id'];
									crossoptnum = this.$storage.get('statusColumnName');
									crossoptnum = crossoptnum.replace(/\[/, "").replace(/\]/, "");
								}
							}
						}
						this.$refs["ruleForm"].validate(valid => {
							if (valid) {
								if (crossrefid && crossuserid) {
									this.ruleForm.crossuserid = crossuserid;
									this.ruleForm.crossrefid = crossrefid;
									let params = {
										page: 1,
										limit: 10,
										crossuserid: this.ruleForm.crossuserid,
										crossrefid: this.ruleForm.crossrefid,
									}
									this.$http({
										url: "jiuyezhongxin/page",
										method: "get",
										params: params
									}).then(({
										data
									}) => {
										if (data && data.code === 0) {
											if (data.data.total >= crossoptnum) {
												this.$message.error(this.$storage.get('tips'));
												return false;
											} else {
												this.$http({
													url: `jiuyezhongxin/${!this.ruleForm.id ? "save" : "update"}`,
													method: "post",
													data: this.ruleForm
												}).then(({
													data
												}) => {
													if (data && data.code === 0) {
														this.$message({
															message: "操作成功",
															type: "success",
															duration: 1500,
															onClose: () => {
																this.parent.showFlag =
																	true;
																this.parent
																	.addOrUpdateFlag =
																	false;
																this.parent
																	.jiuyezhongxinCrossAddOrUpdateFlag =
																	false;
																this.parent.search();
																this.parent
																	.contentStyleChange();
															}
														});
													} else {
														this.$message.error(data.msg);
													}
												});

											}
										} else {}
									});
								} else {
									this.$http({
										url: `jiuyezhongxin/${!this.ruleForm.id ? "save" : "update"}`,
										method: "post",
										data: this.ruleForm
									}).then(({
										data
									}) => {
										if (data && data.code === 0) {
											this.$message({
												message: "操作成功",
												type: "success",
												duration: 1500,
												onClose: () => {
													this.parent.showFlag = true;
													this.parent.addOrUpdateFlag = false;
													this.parent
														.jiuyezhongxinCrossAddOrUpdateFlag =
														false;
													this.parent.search();
													this.parent.contentStyleChange();
												}
											});
										} else {
											this.$message.error(data.msg);
										}
									});
								}
							}
						});
					},
					// 获取uuid
					getUUID() {
						return new Date().getTime();
					},
					// 返回
					back() {
						this.parent.showFlag = true;
						this.parent.addOrUpdateFlag = false;
						this.parent.jiuyezhongxinCrossAddOrUpdateFlag = false;
						this.parent.contentStyleChange();
					},
					addEditStyleChange() {
						this.$nextTick(() => {
							// input
							document.querySelectorAll('.addEdit-block .input .el-input__inner').forEach(el => {
								el.style.height = this.addEditForm.inputHeight
								el.style.color = this.addEditForm.inputFontColor
								el.style.fontSize = this.addEditForm.inputFontSize
								el.style.borderWidth = this.addEditForm.inputBorderWidth
								el.style.borderStyle = this.addEditForm.inputBorderStyle
								el.style.borderColor = this.addEditForm.inputBorderColor
								el.style.borderRadius = this.addEditForm.inputBorderRadius
								el.style.backgroundColor = this.addEditForm.inputBgColor
							})
							document.querySelectorAll('.addEdit-block .input .el-form-item__label').forEach(el => {
								el.style.lineHeight = this.addEditForm.inputHeight
								el.style.color = this.addEditForm.inputLableColor
								el.style.fontSize = this.addEditForm.inputLableFontSize
							})
							// select
							document.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el => {
								el.style.height = this.addEditForm.selectHeight
								el.style.color = this.addEditForm.selectFontColor
								el.style.fontSize = this.addEditForm.selectFontSize
								el.style.borderWidth = this.addEditForm.selectBorderWidth
								el.style.borderStyle = this.addEditForm.selectBorderStyle
								el.style.borderColor = this.addEditForm.selectBorderColor
								el.style.borderRadius = this.addEditForm.selectBorderRadius
								el.style.backgroundColor = this.addEditForm.selectBgColor
							})
							document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(
							el => {
								el.style.lineHeight = this.addEditForm.selectHeight
								el.style.color = this.addEditForm.selectLableColor
								el.style.fontSize = this.addEditForm.selectLableFontSize
							})
							document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el => {
								el.style.color = this.addEditForm.selectIconFontColor
								el.style.fontSize = this.addEditForm.selectIconFontSize
							})
							// date
							document.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el => {
								el.style.height = this.addEditForm.dateHeight
								el.style.color = this.addEditForm.dateFontColor
								el.style.fontSize = this.addEditForm.dateFontSize
								el.style.borderWidth = this.addEditForm.dateBorderWidth
								el.style.borderStyle = this.addEditForm.dateBorderStyle
								el.style.borderColor = this.addEditForm.dateBorderColor
								el.style.borderRadius = this.addEditForm.dateBorderRadius
								el.style.backgroundColor = this.addEditForm.dateBgColor
							})
							document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el => {
								el.style.lineHeight = this.addEditForm.dateHeight
								el.style.color = this.addEditForm.dateLableColor
								el.style.fontSize = this.addEditForm.dateLableFontSize
							})
							document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el => {
								el.style.color = this.addEditForm.dateIconFontColor
								el.style.fontSize = this.addEditForm.dateIconFontSize
								el.style.lineHeight = this.addEditForm.dateHeight
							})
							// upload
							let iconLineHeight = parseInt(this.addEditForm.uploadHeight) - parseInt(this
								.addEditForm
								.uploadBorderWidth) * 2 + 'px'
							document.querySelectorAll('.addEdit-block .upload .el-upload--picture-card').forEach(
								el => {
									el.style.width = this.addEditForm.uploadHeight
									el.style.height = this.addEditForm.uploadHeight
									el.style.borderWidth = this.addEditForm.uploadBorderWidth
									el.style.borderStyle = this.addEditForm.uploadBorderStyle
									el.style.borderColor = this.addEditForm.uploadBorderColor
									el.style.borderRadius = this.addEditForm.uploadBorderRadius
									el.style.backgroundColor = this.addEditForm.uploadBgColor
								})
							document.querySelectorAll('.addEdit-block .upload .el-form-item__label').forEach(
							el => {
								el.style.lineHeight = this.addEditForm.uploadHeight
								el.style.color = this.addEditForm.uploadLableColor
								el.style.fontSize = this.addEditForm.uploadLableFontSize
							})
							document.querySelectorAll('.addEdit-block .upload .el-icon-plus').forEach(el => {
								el.style.color = this.addEditForm.uploadIconFontColor
								el.style.fontSize = this.addEditForm.uploadIconFontSize
								el.style.lineHeight = iconLineHeight
								el.style.display = 'block'
							})
							// 多文本输入框
							document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(
							el => {
								el.style.height = this.addEditForm.textareaHeight
								el.style.color = this.addEditForm.textareaFontColor
								el.style.fontSize = this.addEditForm.textareaFontSize
								el.style.borderWidth = this.addEditForm.textareaBorderWidth
								el.style.borderStyle = this.addEditForm.textareaBorderStyle
								el.style.borderColor = this.addEditForm.textareaBorderColor
								el.style.borderRadius = this.addEditForm.textareaBorderRadius
								el.style.backgroundColor = this.addEditForm.textareaBgColor
							})
							document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(
								el => {
									// el.style.lineHeight = this.addEditForm.textareaHeight
									el.style.color = this.addEditForm.textareaLableColor
									el.style.fontSize = this.addEditForm.textareaLableFontSize
								})
							// 保存
							document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el => {
								el.style.width = this.addEditForm.btnSaveWidth
								el.style.height = this.addEditForm.btnSaveHeight
								el.style.color = this.addEditForm.btnSaveFontColor
								el.style.fontSize = this.addEditForm.btnSaveFontSize
								el.style.borderWidth = this.addEditForm.btnSaveBorderWidth
								el.style.borderStyle = this.addEditForm.btnSaveBorderStyle
								el.style.borderColor = this.addEditForm.btnSaveBorderColor
								el.style.borderRadius = this.addEditForm.btnSaveBorderRadius
								el.style.backgroundColor = this.addEditForm.btnSaveBgColor
							})
							// 返回
							document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el => {
								el.style.width = this.addEditForm.btnCancelWidth
								el.style.height = this.addEditForm.btnCancelHeight
								el.style.color = this.addEditForm.btnCancelFontColor
								el.style.fontSize = this.addEditForm.btnCancelFontSize
								el.style.borderWidth = this.addEditForm.btnCancelBorderWidth
								el.style.borderStyle = this.addEditForm.btnCancelBorderStyle
								el.style.borderColor = this.addEditForm.btnCancelBorderColor
								el.style.borderRadius = this.addEditForm.btnCancelBorderRadius
								el.style.backgroundColor = this.addEditForm.btnCancelBgColor
							})
						})
					},
					addEditUploadStyleChange() {
						this.$nextTick(() => {
							document.querySelectorAll(
									'.addEdit-block .upload .el-upload-list--picture-card .el-upload-list__item')
								.forEach(
									el => {
										el.style.width = this.addEditForm.uploadHeight
										el.style.height = this.addEditForm.uploadHeight
										el.style.borderWidth = this.addEditForm.uploadBorderWidth
										el.style.borderStyle = this.addEditForm.uploadBorderStyle
										el.style.borderColor = this.addEditForm.uploadBorderColor
										el.style.borderRadius = this.addEditForm.uploadBorderRadius
										el.style.backgroundColor = this.addEditForm.uploadBgColor
									})
						})
					},
			}
		};
</script>
<style lang="scss">
	.editor {
		height: 500px;

		& /deep/ .ql-container {
			height: 310px;
		}
	}

	.amap-wrapper {
		width: 100%;
		height: 500px;
	}

	.search-box {
		position: absolute;
	}

	.addEdit-block {
		margin: -10px;
	}

	.detail-form-content {
		padding: 12px;
		background-color: transparent;
	}

	.btn .el-button {
		padding: 0;
	}
</style>
